<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div1">捕获
        <p id="p1">Click me</p>
    </div>
    <div id="div2">冒泡
        <p id="p2">Click me</p>
    </div>
    <hr>
    <p>也可以用event.stopPropagetion停止冒泡事件传播:</p>
    <div id="div">DIV
        <p id="p">P
            <br>
            <a href="#" id="a">A</a>
        </p>
    </div>
    <hr>
    <p>target元素可以作为event.target进行访问，在事件传播阶段不会更改：</p>
    <div id="div3">DIV
        <p id="p3">P<br>
            <a href="#" id="a3">A</a>
        </p>
    </div>
    <hr>
    <p>防止默认动作 某些事件具有与之关联的默认操作。例如，如果您单击链接浏览器，则将您带到链接的目标，当您单击表单提交按钮时，浏览器将提交表单等等。您可以使用event.preventDefault()事件对象的方法来防止此类默认操作。
    </p>
    <p>点击以下链接：</p>

    <ul>
        <li><a href="https://www.bilibili.com" id="ppp1">Visit bilibili(可点)</a></li>
        <li><a href="https://www.google.com">Visit Google</a></li>
        <li><a href="">Visit (cainiaojc.com)</a></li>
    </ul>
    <hr>
    <p>事件委托 冒泡还使我们能够利用事件委托。 事件委托使您可以避免将事件监听器添加到特定节点；而是将事件监听器添加到一个父对象。

    </p>
    <p>单击列表中的任何元素：</p>
    <ul id="parent-list">
        <li id="post-1">Item 1</li>
        <li id="post-2">Item 2</li>
        <li id="post-3">Item 3</li>
        <li id="post-4">Item 4</li>
        <li id="post-5">Item 5</li>
        <li id="post-6">Item 6</li>
    </ul>
    <script>
        //事件传播是一种描述在Web浏览器中触发的事件“堆栈”的方法。
        //事件冒泡和捕获是事件传播的两种机制，它们描述了在一个元素上激活相同事件类型的两个处理程序时发生的情况
        //假设您在<div >元素内有一个<p>元素，并且用户单击了<p>元素，应该首先处理哪个元素的“ click”事件？
        document.querySelector("#div1").addEventListener("click", myFunc, true);
        document.querySelector("#p1").addEventListener("click", myFunc, true);

        document.querySelector("#div2").addEventListener("click", myFunc, false);
        document.querySelector("#p2").addEventListener("click", myFunc, false);

        function myFunc() {
            alert("You clicked the: " + this.tagName + " element");
        }
        //大概理解了一下  true应该就是从外到内 false是从内到外
        document.querySelector("#div").addEventListener("click", myFunc2);
        document.querySelector("#p").addEventListener("click", myFunc2);
        document.querySelector("#a").addEventListener("click", myFunc2);

        function myFunc2() {
            alert("You clicked: " + this.tagName);
            event.stopPropagation();
        }
        //访问目标元素 event的使用

        document.querySelector("#div3").addEventListener("click", myFunc3);
        document.querySelector("#p3").addEventListener("click", myFunc3);
        document.querySelector("#a3").addEventListener("click", myFunc3);

        function myFunc3() {
            alert("target = " + event.target.tagName + ", this = " + this.tagName);
        }

        let links = document.querySelectorAll("a");
        for (let x of links) {
            if (x.id != "ppp1") {
                x.addEventListener("click", myFunc4);
            }
        }

        function myFunc4() {
            event.preventDefault();
            alert("阻止了此链接点击");
        }

        //事件委托
        //冒泡还使我们能够利用事件委托。
        //事件委托使您可以避免将事件监听器添加到特定节点；而是将事件监听器添加到一个父对象。
        //event.target的使用
        //下面event.target是实际被点击的元素
        //nodeName=="LI"判断被点击的是否是<li>元素
        //event.target.id是获取被点击元素的id
        // event.target.id.replace("post-", "")是去掉ID的post-前缀
        document.getElementById("parent-list").addEventListener("click", function(event) {
            if (event.target && event.target.nodeName == "LI") { //要大写LI
                alert("List item " + event.target.id.replace("post-", "") + " was clicked!");
            }
        });
    </script>
</body>

</html>